<script setup>
// ------------------------导入区------------------------
import {useRouter} from "vue-router";

// ------------------------数据区------------------------
let router = useRouter();

// ------------------------功能区------------------------
const showAllDataClickHandler = () => {
  router.push("/");
}

const showPageDataClickHandler = () => {
  router.push("/page")
}

const toAddClickHandler = () => {
  router.push("/add")
}
</script>

<template>
  <el-row>
    <el-col :span="18">
      <span class="banner">~~~欢迎来到老虎野生动物园~~~</span>
    </el-col>
    <el-col :span="6">
      <el-button size="large" @click="showAllDataClickHandler">展示全量数据</el-button>
      <el-button type="primary" size="large" @click="showPageDataClickHandler">展示分页数据</el-button>
      <el-button type="success" size="large" @click="toAddClickHandler">前往添加数据</el-button>
    </el-col>
  </el-row>
  <el-row>
    <el-col :span="24">
      <router-view/>
    </el-col>
  </el-row>
</template>

<style scoped>
.banner {
  color: blue;
  font-size: 30px;
  font-width: bolder;
  display: inline-block;
  width: 100%;
  text-align: center;
}
</style>
